<section class="case-content-top">
  <div class="case-content-title">{{ title }}</div>

  <!--TODO 按用户类型显示顺序和内容-->
  <lv-tabs
    *ngIf="showTabs"
    class="case-content-tabs"
    [(lvActiveIndex)]="active"
    [lvBeforeChange]="beforeTabChange"
    [lvAfterChange]="afterTabChange"
  >
    <ng-container *ngFor="let tab of tabsData">
      <lv-tab *ngIf="!tab.hidden" [lvId]="tab.key" [lvTitle]="tab.title">
        <ng-template lv-tab-lazy>{{ tab.content }}</ng-template>
      </lv-tab>
    </ng-container>
  </lv-tabs>
</section>

<ng-container [ngSwitch]="active">
  <!--Demo 默认展示-->
  <ng-container *ngSwitchCase="'demo'">
    <section #demoContent class="case-content-demo">
      <ng-container *ngTemplateOutlet="featuresTpl; context: { $implicit: features?.demo }"></ng-container>

      <ng-container *ngFor="let com of currentCom?.component; let i = index">
        <app-example-viewer
          *ngIf="!com.demoHidden"
          [baseUrl]="basePath"
          [id]="com?.demoTitle"
          [title]="lang === 'zh-cn' ? com?.demoTitle : com?.demoTitle_en"
          [description]="lang === 'zh-cn' ? com?.demoDescription : com?.demoDescription_en"
          [innerComponent]="com?.demo"
          [iframeSrc]="com?.iframeSrc"
          [codeType]="codeType"
          [codePath]="com?.codePath"
        ></app-example-viewer>
      </ng-container>
    </section>
  </ng-container>

  <!--API-->
  <ng-container *ngSwitchCase="'api'">
    <!--TODO 沿用原来官网逻辑，后续迭代优化-->
    <section #apiContent class="case-content-api">
      <ng-container *ngTemplateOutlet="featuresTpl; context: { $implicit: features?.api }"></ng-container>
      <!-- 属性/事件 -->
      <section *ngIf="currentCom.mApi" id="api" class="case-content-api-box">
        <ng-container *ngFor="let api of currentCom.mApi; let i = index">
          <lv-group lvGutter="16px" class="case-content-api-title">
            <h2 [id]="api.name">{{ lang === 'zh-cn' ? api.name : api.name_en }}</h2>

            <lv-radio-group *ngIf="api.api?.length && api.event?.length" [ngModel]="'attr'" (ngModelChange)="attrEventChange($event, api)">
              <lv-group>
                <lv-radio *ngIf="api.api?.length" [lvViewType]="'button'" lvValue="attr">
                  {{ i18n.get('Case_Attribute') }}
                </lv-radio>
                <lv-radio *ngIf="api.event?.length" [lvViewType]="'button'" lvValue="event">
                  {{ i18n.get('Case_Event') }}
                </lv-radio>
              </lv-group>
            </lv-radio-group>
          </lv-group>

          <lv-datatable #lvTableAPI [lvData]="api.isAttr ? api.api : api.event">
            <thead>
              <tr>
                <ng-container *ngFor="let item of getApiDataConfig(api)">
                  <th *ngIf="!item.hidden" [width]="item.width">{{ item.label }}</th>
                </ng-container>
              </tr>
            </thead>
            <tbody>
              <!--TODO: 待优化-->
              <tr *ngFor="let item of lvTableAPI.renderData">
                <!-- 属性 -->
                <ng-container *ngIf="api.isAttr">
                  <td>
                    <span class="live-api-container" [innerHTML]="item['attribute']"></span>
                    <span *ngIf="item['isAttrAbandon']">{{i18n.get('attr_abandon')}}</span>
                  </td>
                  <td>
                    <span class="live-api-container" [innerHTML]="lang == 'zh-cn' ? item['description'] : item['description_en']"></span>
                  </td>
                  <td><span class="live-api-container" [innerHTML]="item['type']"></span></td>
                  <td><span class="live-api-container" [innerHTML]="item['default'] === 'null' ? '--' : item['default']"></span></td>
                  <td *ngIf="api.hasGlobal">
                    <label *ngIf="item['global']" lv-checkbox [ngModel]="item['global']" [lvControl]="true"></label>
                  </td>
                </ng-container>

                <!-- 事件 -->
                <ng-container *ngIf="!api.isAttr">
                  <td><span class="live-api-container" [innerHTML]="item['event']"></span></td>
                  <td><span class="live-api-container" [innerHTML]="item['parameter']"></span></td>
                  <td>
                    <span class="live-api-container" [innerHTML]="lang == 'zh-cn' ? item['description'] : item['description_en']"></span>
                  </td>
                </ng-container>
              </tr>
            </tbody>
          </lv-datatable>
        </ng-container>
      </section>

      <!-- 组件方法 -->
      <section *ngIf="currentCom.method" id="method" class="case-content-api-box">
        <h2 class="case-content-api-title">{{ i18n.get('method') }}</h2>
        <lv-datatable #lvTableMethod [lvData]="currentCom.method">
          <thead>
            <tr>
              <th>{{ i18n.get('Case_Function_Name') }}</th>
              <th>{{ i18n.get('Case_Description') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of lvTableMethod.renderData">
              <td><span class="live-api-container" [innerHTML]="item['name']"></span></td>
              <td><span class="live-api-container" [innerHTML]="item['demoDescription']"></span></td>
            </tr>
          </tbody>
        </lv-datatable>
      </section>

      <section
        *ngIf="currentCom?.apiDescription"
        class="case-content-api-description"
        [innerHTML]="currentCom.apiDescription | safe : 'html'"
      ></section>

      <!--FAQ-->
      <ng-container *ngIf="faqUrl">
        <section
          #faqContent
          markdown
          disableSanitizer
          id="faq"
          class="case-content-faq-box design-markdown-container"
          [class.component-markdown]="currentCom?.component"
          [ngStyle]="{ display: active === 'api' ? 'block' : 'none' }"
          [data]="faq"
        ></section>
        <div style="display: none" markdown [src]="faqUrl" (load)="onLoad($event)" (error)="onError($event)"></div>
      </ng-container>
    </section>
  </ng-container>

  <!--Design-->
  <!--需要获取md文档中h2标签需要初始化时就渲染DOM节点-->

  <!-- <ng-container *ngTemplateOutlet="active === 'design' ? featuresTpl : ''; context: { $implicit: features?.design }"></ng-container> -->
  <div
    #designContent
    class="case-content-design design-markdown-container"
    [class.component-markdown]="currentCom?.component"
    [ngStyle]="{ display: active === 'design' ? 'block' : 'none' }"
    markdown
    disableSanitizer
    [data]="design"
  ></div>
  <div *ngIf="active === 'design'" style="display: none" markdown [src]="designUrl" (load)="onDesignLoad($event)" (error)="onError($event)"></div>
  <div *ngIf="currentCom?.component && active === 'design'" class="design-markdown-footer">
    <img src="assets/images/site/design-footer.png" alt="design-footer" />
  </div>
</ng-container>

<div class="live-component-anchor ui-g-4 ui-md-4 ui-sm-4 ui-xl-3 ui-lg-4">
  <app-anchor [lvOffsetTop]="100" lvTarget=".live-design-content-wrapper">
    <!--TODO 先按不同的tab拆分生成导航，后续优化-->
    <ng-container *ngIf="active === 'demo'">
      <ng-container *ngFor="let item of currentCom.component">
        <app-anchor-link
          *ngIf="!item.demoHidden"
          lvHref="#{{ encodeSelector(item.demoTitle) }}"
          [lvTitle]="lang === 'zh-cn' ? item.demoTitle : item.demoTitle_en"
        ></app-anchor-link>
      </ng-container>
    </ng-container>

    <ng-container *ngIf="active === 'api'">
      <app-anchor-link
        *ngFor="let item of currentCom.mApi"
        lvHref="#{{ encodeSelector(item.name) }}"
        lvTitle="{{ lang === 'zh-cn' ? item.name : item.name_en }} API"
      ></app-anchor-link>
      <app-anchor-link *ngIf="currentCom.method" lvHref="#method" lvTitle="Method"></app-anchor-link>
      <app-anchor-link *ngIf="faqUrl" lvHref="#faq" lvTitle="FAQ"></app-anchor-link>
    </ng-container>

    <ng-container *ngIf="active === 'design'">
      <app-anchor-link *ngFor="let item of designName" lvHref="#{{ encodeSelector(item) }}" lvTitle="{{ item }}"></app-anchor-link>
    </ng-container>
  </app-anchor>
</div>

<ng-template #featuresTpl let-data>
  <lv-alert *ngFor="let feature of data" class="case-content-demo-alert" lvType="info" [lvClosable]="false">
    <h2 class="lv-alert-title">{{ feature.title }}</h2>
    <div *ngFor="let text of feature.content; let i = index">
      {{ text }}
    </div>
  </lv-alert>
</ng-template>
